<!-- 基础表格组件 -->
<template>
  <div class="baseList">
    <div class="tableBoxs">
      <div v-if="admin" class="newBox">
        <button class="bt newBoxbutton" @click="handleBulid()">新建</button>
      </div>
      <t-table
        :data="data"
        :columns="COLUMNS"
        :row-key="rowKey"
        vertical-align="middle"
        :hover="true"
        :pagination="pagination"
        :disable-data-page="pagination.total <= 10"
        :selected-row-keys="selectedRowKeys"
        :loading="dataLoading"
        :sort="sort"
        :filter-value="filterValue"
        :hide-sort-tips="true"
        :show-sort-column-bg-color="true"
        table-layout="auto"
        @filter-change="FilterChange"
        @sort-change="sortChange"
        @select-change="rehandleSelectChange"
      >
        <!-- 图标 -->
        <template #icon="{ row }">
          <img v-if="row.icon" :src="row.icon" style="width: 32px;height: 32px; margin-top: 6px" />
          <div class="icon" v-else>
            <t-icon name="server" size="37px" style="margin-top: 0px; margin-left: -1px"></t-icon>
          </div>
        </template>
        <!-- end -->
        <!-- 更新时间-->
        <template #updateTime="{ row }">
          <div class="updateTime">
            <span>{{ row.updateTime }}</span>
          </div>
        </template>
        <!-- end -->
        <!-- 在操作栏添加删除、编辑、查看三种操作 -->
        <template #op="{ row }">
          <div style="text-align: right; float: right">
            <a class="btn-dl btn-split-right" @click="handleClickDelete(row)"
              >删除</a
            >
            <a class="font-bt btn-split-right" @click="handleSetupContract(row)">
              编辑</a
            >
            <a
              v-if="row.status == 0"
              class="font-bt line"
              @click="handleClickStatus(row, 1)"
              >启用</a
            >
            <a
              v-if="row.status == 1"
              class="font-bt line"
              @click="handleClickStatus(row, 0)"
              >停用</a
            >
          </div>
        </template>
        <!-- end -->
      </t-table>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ListBase'
}
</script>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
// import { isNumber } from 'lodash'
import { COLUMNS } from '../constants'
import { getUserStore, useUserStore } from "@/store"; // 表格列

const props = defineProps({
  listData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  pagination: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emit = defineEmits([
  'fetchData',
  'handleSetupContract',
  'handleClickStatus',
  'handleBulid',
  'handleClickDelete'
])
// 监听器赋值
watch(props, () => {
  data.value = props.listData
  pagination.value = props.pagination
  dataLoading.value = false
})
const router = useRouter()
// 排序
const sort = ref({
  // 按照服务调用次数进行排序
  sortBy: 'serviceCallNumber'
})
// 表格数据
const data: any = ref([])
// 分页
const pagination: any = ref({
  pageSize: 10,
  total: 0,
  current: 1 // 默认当前页
})
// 行的key
const rowKey = 'index'
const filterValue = ref({
  status: ''
}) // 过滤
// 加载状态
const dataLoading = ref(true)

// 排序
const sortChange = (val) => {
  // 将排序的结果赋值给sort
  sort.value = val
  // 调用onFilterChange方法进行排序
  onFilterChange(val)
}
// 模拟异步请求进行排序
const onFilterChange = (val) => {
  emit('fetchData', val)
  // const timer = setTimeout(() => {
  //   if (val) {
  //     data.value = data.value
  //       .concat()
  //       .sort((a, b) =>
  //         val.descending
  //           ? b[val.sortBy] - a[val.sortBy]
  //           : a[val.sortBy] - b[val.sortBy]
  //       )
  //   } else {
  //     // 如果没有排序，就按照原来的顺序进行排序
  //     data.value = data.value.concat().sort((a, b) => a.index - b.index)
  //   }
  //   clearTimeout(timer)
  // }, 100)
}
// 筛选
const FilterChange = (val) => {
  ONFilterChange(val)
}
// 模拟异步请求进行筛选
const ONFilterChange = (val) => {
  emit('fetchData', val)
  // const timer = setTimeout(() => {
  //   data.value = data.value.filter((timer) => {
  //     let result = true
  //     if (isNumber(val.status)) {
  //       result = timer.status === val.status
  //     }
  //     return result
  //   })
  //   clearTimeout(timer)
  // }, 150)
}

// 选中的行
const selectedRowKeys = ref([1, 2])
const rehandleSelectChange = (val: number[]) => {
  selectedRowKeys.value = val
}
// 打开编辑弹窗
const handleSetupContract = (val) => {
  emit('handleSetupContract', val)
}
const handleClickStatus = (val, status) => {
  emit('handleClickStatus', val, status)
}
// 点击删除
const deleteIdx = ref(-1) // 删除的索引
const handleClickDelete = (row: { rowIndex: any }) => {
  emit('handleClickDelete', row)
  deleteIdx.value = row.rowIndex
}

// 点击新建
const handleBulid = () => {
  emit('handleBulid')
}

const userStore = useUserStore()
const admin = ref(false)
userStore.getUserInfo().then((res) => {
  admin.value = res.admin
})
</script>
<style lang="less" scoped src="../index.less"></style>
